<template>
	<view>
		<view class="bg" @click="closeCans"></view>
		<!-- 海报 -->
		<view class="fixed">
			<view>
				<canvas canvas-id="zwyPoster" :style="{width:cansWidth,height:cansHeight}" class="isCan"></canvas>
				<view class="fixedBox">
					<view class="boxLeft"><button class="flexBtn btnLeft" hover-class="btnHover" @click="saveCans">保存</button></view>
					<view class="boxRight"><button class="flexBtn btnRight" hover-class="btnHover" @click="closeCans">关闭</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 接口相关
	import _function from '@/common/_function.js'
	import api from '@/common/api.js'

	export default {
		props: {

		},
		data() {
			return {
				// 海报
				cansWidth: 300, //海报宽度
				cansHeight: 440 //海报高度
				// 海报
			};
		},


		methods: {

			async creatposter(posterbg, postercode) {


				this.ctx = uni.createCanvasContext('zwyPoster', this);
				/*
					绘制图片
					调用方式:this.drawBg({
						url:'',路径
						sLeft:0~1 | 'center' 百分比离左边距离 1则为100vw,
						sTop:0~1 百分比离顶部距离,
						sWidth:0~1 百分比宽度，
						sHeight:0~1 百分比高度
					})
				*/

				await this.drawBg({
					url: posterbg,
					sLeft: 0,
					sTop: 0,
					sWidth: 1,
					sHeight: 1
				})
				console.log(11111111111111)
				/*
					绘制头像
					绘制头像需要添加域名白名单	downloadFile合法域名	https://wx.qlogo.cn
					调用方式:this.circleImg(img, x, y, r) 
					img:图片路径
					x:0~1 百分比离左边距离,
					y:0~1 百分比离顶部距离
				*/
				await this.circleImg(postercode,
					.36, .60, 41)
					uni.hideLoading()
				// 绘制完成删除海报
				_function.request(api.deleteCode)
			},
			async circleImg(img, x, y, r) {
				let image = await uni.getImageInfo({
					src: img
				})
				console.log(image)
				x = Math.ceil(this.cansWidth * x)
				y = Math.ceil(this.cansHeight * y)
				this.ctx.save();
				var d = 2 * r;
				var cx = x + r;
				var cy = y + r;
				this.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
				this.ctx.clip();
				this.ctx.drawImage(image[1].path, x, y, d, d);
				this.ctx.restore();
				this.ctx.draw(true)
			},
			closeCans() {
				this.$parent.isposter = false
				// 删除海报
			},
			saveCans() {
				uni.showLoading({
					title: '保存ing...',
					mask: true
				})
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: this.cansWidth * 1.5,
					height: this.cansHeight * 1.5,
					destWidth: this.cansWidth * 3,
					destHeight: this.cansHeight * 3,
					canvasId: 'zwyPoster',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: '保存相册成功'
								})
								
							},
							fail(res) {
								console.log(res)
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},

			async drawBg(item) {
				let image = await uni.getImageInfo({
					src: item.url
				})
				this.ctx.drawImage(image[1].path, this.cansWidth * item.sLeft, this.cansHeight * item.sTop, this.cansWidth * item.sWidth,
					this.cansHeight * item.sHeight);
				console.log('00000')

				this.ctx.draw(true);
			},

		}
	}
</script>

<style lang="scss" scoped>
	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		margin-top: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.bg {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.fixedBox {
		width: 100%;
		height: 100upx;
		// position: fixed;
		// bottom: 30upx;
		// left: 0;
		display: flex;
		z-index: 1000;
		margin-top: 50rpx;

		.boxLeft,
		.boxRight {
			width: 50%;
			height: 100%;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1000;
			justify-content: center;

			.flexBtn {
				position: relative;
				z-index: 1000;
				width: 200upx;
				height: 60upx;
				text-align: center;
				line-height: 55upx;
				font-size: 24upx;
				border-bottom: 6upx #007AFF solid;
				border-radius: 32upx;

				color: white;
				background: linear-gradient(to left, #007AFF, #0081FF);
			}
		}
	}

	.btnHover {
		height: 55upx !important;
		border-bottom: 0 #F6BE3C solid !important;
		transform: translateY(3px) translateZ(0px) !important;
	}

	.isCan {

		border-radius: 10px;
		// position: fixed;
		// left: 0;
		// z-index: 999;
		width: 300px;
		height: 440px;
		// right: 0;
		// bottom: 160upx;
		margin: 0 auto;
		background-size: 100%;
	}
</style>
